<template>
	<view>
		<uNavbar title="奖励明细" bgColor="transparent"></uNavbar>
		<view class="tabss flex_ld">
			<view class="flex_c" v-for="(item,index) in list1" :key="index">
				<text @click="changeTabs(index)" :class="itemindex == index?'active':''">{{item}}</text>
			</view>
		</view>
		<view class="advent flex_Z" v-if="itemindex == 0" v-for="item in expeditionList" :key="item.id" >
			<view class="advent_top flex_ld">

				<view class="advent_top_l flex_Z">
					<text class="f30 c0">首发抢购凭证</text>
					<text class="f24 c4">2024-2-23 4:33</text>
				</view>
				<view class="advent_top_r flex_c"  @click="changeReceive">
					<text>领取 </text>
				</view>
			</view>
		</view>
<!-- 		<view class="advent flex_Z" v-if="itemindex == 1">
			<view class="advent_top flex_ld"  >
				<view class="advent_top_l flex_Z">
					<text class="f30 c0">首发抢购凭证</text>
					<text class="f24 c4">2024-2-23 4:33</text>
				</view>
				<view class="advent_top_r_s flex_c">
					<text>已领取</text>
				</view>
			</view>
		</view> -->
		<!-- 暂无数据 / 加载更多 -->
		<noDatas :xxxList="expeditionList" :status="status"></noDatas>
	</view>
</template>

<script>
	import {incomeRecord} from "../../api/other.js";
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				expeditionList: [],
				itemindex: 0,
				list1: ['待领取', '已领取'],
				selnum:1
			}
		},
		onLoad() {
			this.initList()
		},
		methods: {
			// 初始化
			initList() {
				let data = {
					page: this.page,
					status:this.selnum
				};
				incomeRecord(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.expeditionList = this.page == 1 ? list : this.expeditionList.concat(list);
						console.log(this.expeditionList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			changeTabs(index) {
				console.log(index);
				this.itemindex = index
				this.selnum=index+1
				this.page=1
				this.initList()
			},
			changeReceive(){
				console.log(111);
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.page = 1,
					that.search = '',
					that.expeditionList = [],
					that.initList()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>

<style scoped>
	.tabss {
		width: 92%;
		/* background: pink; */
		margin: 20rpx auto;
	}

	.tabss>view {
		padding: 20rpx 0;
		width: 50%;
		color: #A6A5AF;
	}

	.active {
		color: #ffffff !important;
	}

	.advent {
		width: 690rpx;
		/* height: 234rpx; */
		background: #3C2F65;
		border-radius: 16rpx;
		margin: 20rpx auto;
	}

	.advent_top {
		/* border-bottom: 1rpx solid #ffffff30; */
	}

	.advent_top_l {
		padding: 20rpx 30rpx;
	}

	.advent_top_l>text {
		margin: 10rpx 0;
	}

	.advent_top_r {
		margin-right: 30rpx;
		font-size: 24rpx;
		color: #ffffff;
		width: 124rpx;
		height: 52rpx;
		background: linear-gradient( 274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 232rpx 232rpx 232rpx 232rpx;
	}
	.advent_top_r_s {
		margin-right: 30rpx;
		font-size: 24rpx;
		color: #ffffff;
		width: 124rpx;
		height: 52rpx;
		background: linear-gradient( 274deg, #0014FF 0%, #8020EF 50%, #FF2CDF 100%);
		border-radius: 232rpx 232rpx 232rpx 232rpx;
		opacity: 0.5;
	}
</style>